<template>
	<view class="warp">
		<view class="textbox fillet" style="margin-top: 30rpx">
			<input v-model="formdata.TrueName" type="text"  placeholder-class="placeholderStyle" placeholder="填写教练姓名" />
			<textarea
				v-model="formdata.Resume"
				placeholder-style="font-size: 26rpx;line-height: 1.6;"
				placeholder="填写你要发布的教练介绍"
			></textarea>
			<view class="img_list">
				<!-- <view class="title">教练图片</view> -->
				<view class="img_box">
					<view class="img" v-for="(item, i) in imgArr" :key="i">
						<image :src="item.tempUrl" mode="aspectFill"></image>
						<view class="icon" @click.stop="delImg(i)">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="img addimg" @tap="upload" v-if="imgArr.length < 9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="checkbox fillet">
			<view class="check_item">
				<view class="tit">联系电话</view>
				<view class="check_content">
					<input v-model="formdata.Phone" class="lit" type="tel" placeholder="请输入联系电话" />
				</view>
			</view>
			<!-- <view class="check_item" @click="$refs.popup.open()">
				<view class="tit">签约场地(选填)</view>
				<view class="check_content">
					<view :class="['lit', address ? '' : 'gary']">{{ address ? address : '请选择就职场地' }}</view>
					<uni-icons size="16" color="#C7C7C7" type="right"></uni-icons>
				</view>
			</view> -->
		</view>

		<view style="height: 130rpx"></view>
		<view class="btn_box" @click="send">
			<view class="go_btn">申请认证</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popupbox">
				<view class="title">选择就职场地</view>
				<view class="sear">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105828891391238.png" mode=""></image>
					</view>
					<input type="text" v-model="searchVal" placeholder="请输入场地名称" @input="searchFun" />
					<view class="icon" @click="clearSearch">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105829170081077.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll" scroll-y @scrolltolower="scrolltolower">
					<view v-if="searchArr.length">
						<view class="item" v-for="item in searchArr" :key="item.ID" @click="tapShop(item)">
							【{{item.City}}】{{ item.ShopName}}
						</view>
					</view>
					<view class="item" v-else style="height: 100%; display: flex; align-items: center; justify-content: center">
						暂无该场地信息
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			address: '',
			formdata: {
				TrueName: '',
				Resume: '', //教练介绍
				Phone: '', //  联系方式
				PhotoUrl: '', // 头像图片
				ShopID: '', //所属场地  （非必填）
				Type:'教练'
			},
			imgArr: [],
			isMore:true,
			searchArr:[],
			searchVal: '',
			PageIndex:1,
			PageSize:10,
			ossPath:'',
		};
	},
	onLoad() {
		this.Shoplist();
		this.ossPath = this.$ossPath
	},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
	onUnload() {},
	methods: {
		async Shoplist() {
			let res = await this.$api.post('/Shops/Search', { ShopName: this.searchVal, PageIndex:this.PageIndex, PageSize:10 });
			this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			this.searchArr = this.searchArr.concat(res.data) 
		},
		scrolltolower(){
			if(this.isMore){
				this.PageIndex++
				this.Shoplist()
			}
		},
		tapShop(item){
			console.log(item);
			this.address = `【${item.City}】${item.ShopName}`
			this.formdata.ShopID = item.ID
			this.$refs.popup.close()
		},
		clearSearch(){
			this.PageIndex = 1
			this.searchVal = ''
			this.searchArr = []
			this.Shoplist()
		},
		searchFun(e){
			this.$util.throttle(()=>{
				this.PageIndex = 1
				this.searchArr = []
				this.Shoplist()
			})
		},
		// 文件上传
		async uploading(url, tempKey) {
			console.log('url ----------' + url);

			const r = await this.$upload(url, (pro) => {
				this.imgArr.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			});
			this.imgArr.forEach((item) => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});

			console.log('upload file ' + r);
			// this.formdata.PhotoUrl.push(r);
			this.formdata.PhotoUrl = r
		},
		upload() {
			let _this = this;
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					console.log(res);
					res.tempFiles.forEach(async (item) => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};

						_this.imgArr.push(o);

						let rex = await _this.uploading(o.flieUrl, o.tempKey);
						console.log('rex-------', rex);
					});
				},
			});
		},
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);

									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) {},
			});
		},
		delImg(i) {
			this.imgArr.splice(i, 1);
			// this.formdata.Images.splice(i, 1);
		},
		async send() {
			let con = this.formdata;
			if (!con.TrueName) {
				this.$pv.msg('请填写教练姓名');
				return;
			}
			if (!con.Resume) {
				this.$pv.msg('请填写教练介绍');
				return;
			}
			if (!this.imgArr.length) {
				this.$pv.msg('至少上传一张图片');
				return;
			}
			if (!con.Phone) {
				this.$pv.msg('请填写联系电话');
				return;
			}
			// this.formdata.Images = JSON.stringify(this.formdata.Images);
			let res = await this.$api.post('/Technicians/Apply', this.formdata);
			if (res.message == 'success') {
				this.$pv.msg('认证成功');
				setTimeout(() => {
					uni.$emit('send');
					uni.navigateBack();
				}, 700);
			}
		},
	},
};
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
.gary {
	color: #999999 !important;
	font-size: 32rpx;
	margin-right: 7rpx;
}
image {
	width: 100%;
	height: 100%;
}
.fillet {
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
}
.placeholderStyle{
	color: #C2C2C2;
	font-size: 32rpx;
	font-weight: 500;
}
.warp {
	padding: 26rpx;
	.img_list {
		padding-top: 30rpx;
		border-top: 1rpx solid #E4E4E4;
		box-sizing: border-box;
		// padding: 26rpx 32rpx;
		.title {
			font-size: 30rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.img_box {
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.videobox {
			padding: 32rpx;
			position: relative;
			> view {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image {
				border-radius: 8rpx;
			}
			.icon {
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n) {
			margin-right: 0;
		}
		.addimg {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F6F6F6;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.textbox {
		padding: 26rpx 32rpx;
		.tit_box {
			margin-bottom: 20rpx;
		}
		input {
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E4E4E4;
		}
		input:nth-child(2) {
			margin-top: 20rpx;
		}
		textarea {
			width: 100%;
			height: 150rpx;
			margin: 20rpx 0;
			font-size: 26rpx;
			line-height: 1.6;
		}
	}
	.checkbox {
		margin-top: 30rpx;
		padding: 0 32rpx;
		.check_item {
			border-bottom: 1rpx solid #E4E4E4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				color: #333333;
				font-size: 28rpx;
			}
			.check_content {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 26rpx 0;
				width: 65%;
				input {
					font-size: 26rpx !important;
					width: 100%;
					text-align: right;
				}
				.input-placeholder {
					font-size: 26rpx !important;
				}
				.lit {
					width: 100%;
					text-align: right;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.inp_box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-end;
					/deep/ .u-radio-group {
						.u-radio {
							margin-left: 20rpx;
						}
						text {
							font-size: 28rpx !important;
						}
					}
					> view {
						display: flex;
					}

					.total_reward {
						font-size: 28rpx;
						color: rgb(156, 156, 156);
						margin-top: 16rpx;
					}
				}
			}
		}
		.check_item:last-child {
			border: 0;
		}
	}
	.check_wap {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		background-color: #2c2c2c;
		padding: 26rpx;
		padding-bottom: 40rpx;
		view {
			font-size: 28rpx;
		}
		.check_tab {
			margin-top: -10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 2rpx;
			border-bottom: 2rpx solid #404040;
			.nav {
				display: flex;
				align-items: center;
				flex: 0.9;
				.nav_text {
					padding: 10rpx 24rpx;
				}
				.nav_text:first-child {
					padding-left: 0;
				}
			}
			.nav_active {
				color: #e0c48e;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					bottom: -6rpx;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 30%;
					height: 6rpx;
					border-radius: 24rpx;
					background-color: #e0c48e;
				}
			}
			.tit {
				font-size: 32rpx;
				color: #fff;
				justify-content: center;
			}
			.close {
				padding: 10rpx;
				display: flex;
				align-items: center;
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.picker_view {
			width: 100%;
			margin: 20rpx 0;
			height: 500rpx;
			overflow: hidden;
			.picker_colum {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.border {
				border-top: 2rpx solid #717171;
				border-bottom: 2rpx solid #717171;
			}
		}
		.maskclass {
			background: none;
		}
		.picker_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #4c310c;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			text-align: center;
			background-image: linear-gradient(to right, #fef0bc, #b98b51);
		}
	}
	.btn_box {
		// background-color: #262626;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		z-index: 9;
		.go_btn {
			color: #fff;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #0D0D0D;
		}
	}
}
.popupbox {
	// background-color: #2c2c2c;
	background-color: #fff;
	border-top-left-radius: 26rpx;
	border-top-right-radius: 26rpx;
	padding: 20rpx 32rpx;
	padding-bottom: 70rpx;
	view{color: #111;}
	.title {
		color: #111;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.sear {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		// background-color: #fff;
		border-radius: 46rpx;
		box-shadow: 0 0 8rpx #ccc;
		.icon {
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 34rpx;
				height: 34rpx;
			}
		}
		input {
			padding: 10rpx 0;
			flex: 1;
		}
	}
	.scroll {
		width: 100%;
		height: 30vh;
		box-sizing: border-box;
		.item {
			padding: 20rpx 0;
			text-align: center;
			border-bottom: 2rpx solid #eee;
			overflow: hidden;  /*超出部分隐藏*/
			white-space: nowrap;  /*禁止换行*/
			text-overflow: ellipsis; /*省略号*/

		}
		.item:last-child {
			border: 0;
		}
		.item:first-child {
			padding-top: 0;
		}
	}
}
</style>
